<template>
    <div style="margin-left: 2vmax">
        <el-col :span="24"  v-for="item in video" :key="item.category_id">
            <div class="ar_title" style="margin-top: 3vmax;margin-bottom: -1vmax">{{item.category_title}}</div>
            <el-row :gutter="20"  class="video" style="    margin-top: 5px;" >
                <el-col :span="6"  v-for="(vd,index) in item['video']"  :key=" item['video'].video_id " >
                    <div>
                        <p >{{vd.video_title}}</p>
                        <video controls  class="video-w">
                            <source :src ='vd.video_path' type="video/mp4"/>
                        </video>
                        <p >{{vd.video_desc}}</p>
                    </div>
                </el-col>
            </el-row>
        </el-col>
    </div>
</template>

<script>
  import { get_video } from '../../api/app'
  export default {
    name: 'index',
    data(){
      return{
        path:'./static/demo.mp4',
        video:[]
      }

    },
    created(){
      this.fetch_video();
    },
    methods:{
      fetch_video(){
        get_video().then(response => {
          this.video = response.data
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>

<style scoped>
    .video{

    }
    .video div {
        margin-top:1vmax;
        text-align: center;
        height: 15vmax;
    }
    .video-w{
        width: 100%;
        height: auto;
    }
    .video div>div{
        border: solid #cccccc 1px;
    }

</style>
